<template>
  <div>
    <!-- 工单编号行 -->
    <div class="search">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="设备编号:">
          <el-input v-model="params.innerCode" size="small" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" class="btn" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主体内容  新建 -->
    <div class="result">
      <div class="operation">
        <el-row>
          <el-button
            size="medium"
            icon="el-icon-circle-plus-outline"
            class="one"
            @click="addbuild"
          >新建</el-button>
          <el-button size="small" class="two" @click="gongdan">批量操作</el-button>
        </el-row>
      </div>
      <!-- 表格数据 -->
      <div>
        <template>
          <el-table
            ref="multipleTable"
            :data="equipment"
            style="width: 100%"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              type="index"
              :index="indexMethod"
              width="80"
            />
            <el-table-column prop="innerCode" label="设备编号" width="182" />
            <el-table-column prop="type.name" label="设备型号" width="179" />
            <el-table-column
              prop="node.addr"
              label="详细地址"
              width="179"
            />
            <el-table-column prop="ownerName" label="合作商" width="179" />
            <!-- :show-overflow-tooltip="true" -->
            <el-table-column
              prop="vmStatus"
              label="设备状态"
              width="150"
            />
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  class="detail"
                  @click="aisle(scope.row)"
                >货道</el-button>
                <el-button
                  type="text"
                  class="piramy"
                  @click="idea"
                >策略</el-button>
                <el-button
                  type="text"
                  class="detail"
                  @click="modify(scope.row)"
                >修改</el-button>

              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 新建 dialog -->
    <el-dialog
      title="新增设备"
      :visible="dialogVisible"
      width="630px"
      @close="handleClose"
    >
      <el-form ref="vmadd" :model="vmadd" :rules="rules" label-width="140px">
        <el-form-item label="设备编号:">{{ '系统自动生成' }}</el-form-item>
        <el-form-item label="选择型号:" prop="vmType">
          <el-select v-model="vmadd.vmType" placeholder="请选择" style="width:90%">
            <el-option
              v-for="item in options"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位:" prop="nodeId">
          <el-select v-model="vmadd.nodeId" placeholder="请选择" style="width:90%">
            <el-option
              v-for="item in pointPosition"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-col class="pstion">
        共{{ totalCount }}条记录
        第{{ params.pageIndex }}/{{ totalPage }}页
      </el-col>
      <el-pagination
        :page-size="params.pageSize"
        :total="totalCount"
        :current-page="params.pageIndex"
        layout="prev,next"
        prev-text="上一页"
        next-text="下一页"
        @current-change="currentChangeFn"
      />
    </el-row>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
import { searchVendingMachine, searchVmType, AreaDetails, addvm } from '@/api'
export default {
  data() {
    return {
      // 校验
      rules: {
        vmType: [
          { required: true, message: '请输入' }

        ],
        nodeId: [
          { required: true, message: '请输入' }
        ]
      },
      // 新建 dialog 显示隐藏
      dialogVisible: false,
      // 新建提交请求数据
      vmadd: {
        createUserId: null,
        nodeId: '',
        vmType: null
      },
      // 设备型号 数据
      options: [],
      // 点位数据
      pointPosition: [],

      // 多选框
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      // 设备总数据
      equipment: [],
      totalCount: null, // 总条数
      totalPage: '', // 总页数
      params: {
        pageIndex: 1, // 页码
        pageSize: 10, // 每页数量
        status: '', // 售货机状态(0:未投放;1-运营;3-撤机)
        innerCode: ''//	售货机编号
      }
    }
  },
  created() {
    this.searchgoods()
  },
  methods: {
    // 多选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 搜索售货机 封装方法
    async searchgoods() {
      const res = await searchVendingMachine(this.params)
      // console.log(res)
      this.equipment = res.currentPageRecords
      // 处理设备状态
      this.equipment.forEach(item => {
        if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus = '运营'
        } else {
          item.vmStatus = '撤机'
        }
      })
      this.equipment.forEach(item => {
        // 处理详细地址  转字符串数据
        const str = item.node.addr.split('-')
        // console.log(str)
        // 取出最后一项再次赋值
        item.node.addr = str[str.length - 1]
        // console.log(item.node.addr)
      })
      this.totalCount = Number(res.totalCount)
      this.totalPage = res.totalPage
    },
    // 修改
    modify() {},
    // 策略
    idea() {},
    // 货道
    aisle() {},
    // 批量操作
    gongdan() {},
    // 新建提交
    sumbit() {
      this.$refs.vmadd.validate(async(valid) => {
        if (!valid) return
        // 处理新建 所需创建人id
        // 遍历pointPosition点位总数据
        // 判断其中需要的id 是否和选中点位 id 相等 如果相等， 把点位总数据中 createUserId创建人id 给到请求所需数据
        const str = this.pointPosition.find(item => item.id === this.vmadd.nodeId)
        this.vmadd.createUserId = str.createUserId
        // 发起创建请求
        await addvm(this.vmadd)
        // 成功提示
        this.$message.success('新增成功')
        // 更新页面
        this.searchgoods()
        // 关闭弹窗
        this.handleClose()
      })
    },
    // 新建  展示
    async addbuild() {
      // 调用型号接口 获取数据
      const res = await searchVmType({ ...this.params, pageSize: 10000 })
      console.log(res)
      this.options = res.currentPageRecords
      // 调用点位接口 获取数据
      const res2 = await AreaDetails({ ...this.params, pageSize: 10000 })
      console.log(res2)
      this.pointPosition = res2.currentPageRecords
      // createUserId
      this.dialogVisible = true
    },
    // 新建 关闭
    handleClose() {
      this.$refs.vmadd.resetFields()
      this.dialogVisible = false
    },
    // 查询
    onSubmit() {
      this.searchgoods()
    },
    // 序号
    indexMethod(index) {
      return index + 1
    },
    // 翻页
    currentChangeFn(val) {
      this.params.pageIndex = val
      this.searchgoods()
    }
  }
}
</script>
<style lang="scss" scoped>
// 头部固定
.search {
  display: flex;
  display: -webkit-box;
  background: #fff;
  height: 64px;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
}
.demo-form-inline {
  height: 36px;
}
// 新建
.result {
  // width: 1215px;
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .operation {
    margin-bottom: 20px;
    .one {
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      color: #fff;
    }
    .two{
          background-color: #fbf4f0!important;
    }
  }
}
.el-input{
  width: 90%;
}
</style>
